
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Header from '@/components/header/header';
import ListItem from './child';
import Footer from '@/components/footer/footer';
import AlertTip from '@/components/alert_tip/alert_tip';

import { saveUserInfo } from '@/store/action';
import { getStore } from '@/utils/commons';
import API from '../../api/api';
import './profile.scss';
import QueueAnim from 'rc-queue-anim';
import { profileData, userAvatar } from '../../constan/profile';
class Profile extends Component {
  static propTypes = {
    userInfo: PropTypes.object.isRequired,
    saveUserInfo: PropTypes.func.isRequired
  }
  state = {
    username: '登陆/注册',
    mobile: "暂无绑定手机号",
    imgPath: '',
    balance: 0,
    count: 0,
    pointNumber: 0,
    hasAlert: false,
    alertText: '请在手机App中打开'
  }
  initData = () => {
    let newState = {};
    const { userInfo } = this.props;
    if (userInfo && userInfo.user_id) {
      newState.mobile = userInfo.mobile || "暂无绑定手机号";
      newState.username = userInfo.username;
      newState.count = userInfo.gift_amount;
      newState.pointNumber = userInfo.point;
      newState.balance = userInfo.balance
    } else {
      newState.mobile = "暂无绑定手机号";
      newState.username = '登陆/注册'
    }
    this.setState(newState)
  }
  handleItemClick = (type) => {
    let alertText = '';
    switch (type) {
      case 'unfinised':
        alertText = '请到官方网站下载';
        break;
      case 'unfinished':
        alertText = '功能尚未开发';
        break;
      default:
    }
    this.setState({
      hasAlert: !this.state.hasAlert,
      alertText
    })
  }
  getUserInfo = async () => {
    let userInfo = await API.getUser({ user_id: getStore('user_id') });
    userInfo.imgPath = userInfo.avatar.indexOf('/') !== -1 ? '/img/' + userInfo.avatar : userAvatar;
    this.props.saveUserInfo(userInfo);
    this.initData()
  }

  goBack = () => {
    this.props.history.goBack()
  }
  componentDidMount() {
    if (!this.props.userInfo.user_id) {
      this.getUserInfo()
    } else {
      this.initData()
    }
  }
  render() {
    return <div className='profile-container'>
      <QueueAnim type='bottom'>
        <Header title='我的' goBack={this.goBack} />
        <div className='profile-number'>
          <Link to={this.props.userInfo && this.props.user_id ? '/info' : '/login'} className='profile-link'   >
            <img src={this.props.userInfo.imgPath} alt="img is wrong" className='private-image' />
            <div className='user-info'>
              <div>{this.state.username}</div>
              <div>
                <div className='icon-tel'></div>
                <span className='icon-mobile-number'>
                  {this.state.mobile}
                </span>
              </div>
            </div>
            <div className='icon-arrow-rigth'></div>
          </Link>
        </div>
        <div className='info-data' >
          <ul className='clear'>
            <Link to='/balance' className='info-data-link'>
              <span className='info-data-top'>
                <b>{parseInt(this.state.balance).toFixed(2)}</b>元
              </span>
              <span className='info-data-bottom'>我的余额</span>
            </Link>
            <Link to='/balance' className='info-data-link'>
              <span className='info-data-top'><b>{this.state.count}</b>个</span>
              <span className='info-data-bottom'>我的优惠</span>
            </Link>
            <Link to='/balance' className='info-data-link'>
              <span className='info-data-top'>
                <b>{this.state.pointNumber}</b>元
              </span>
              <span className='info-data-bottom'>我的积分</span>
            </Link>
          </ul>
        </div>
        <div className='profile-list'>
          <QueueAnim deley='0.4'>
            {
              profileData.map(v => {
                const { id, fnType, } = v;
                return <ListItem  {...v} key={id} handleClick={() => {
                  this.handleItemClick(fnType)
                }} />
              })
            }
          </QueueAnim>
        </div>
        <Footer />
      </QueueAnim>
      {
        this.state.hasAlert && <AlertTip logot={() => {
          return false
        }} closeTip={this.handleItemClick} lertText={this.state.alertText} />
      }

    </div>
  }
}

export default connect(
  state => {
    return {
      userInfo: state.userInfo
    }
  }, (dispatch) => {
    return {
      saveUserInfo: (userInfo) => dispatch(saveUserInfo(userInfo))
    }
  }
)(Profile);
